@use "variables" as *;
@use "sass:math";
@use "sass:color";


/**
 * 基础样式
 * -------------------------------
 * 当前设计包含下列设计：
 * 属性微调样式，例如：margin、padding、width、gap 等
 * 组件基础样式，例如：button、input、textarea、blockquote、ul、dd、dt 等；
 * 常用布局样式，例如：flex-row、flex-column、flex-list、grid等；
 *
 * 简单地说，就是写完能用一辈子，不会再改的样式，就放到这里。
 *
 * 注意：
 * 因为是十分基础的样式，不需要 css 变量参与，也没有使用的必要，指的是 var()；
 * 调整代码的可能性非常低，如果需要调整样式，修改 variables.scss 文件即可。
 *
 * 兼容性：
 * 引入其它项目，容易产生冲突，但是影响一般不大，
 * 比如：margin-large，很明显表示添加大的外边框，代码含义不会产生较大偏差。
 */

/**
 * 标准色值
 * -------------------------------
 * 常用主色调以及辅助色，（例如，危险的颜色表示危险的操作）
 *
 * 大部分组件包含着几种色彩，注意不一定只作为背景色使用，
 * 在 .badge 作为背景色，.blockquote 则作为边框颜色
 */
$standard-colors: (
        primary: $sea-color-primary, // 强调
        success: $sea-color-success, // 成功
        warning: $sea-color-warning, // 警告
        danger: $sea-color-danger, // 危险
        info: $sea-color-gray, // 信息
);

/**
 * 背景填充色
 * -------------------------------
 * 盒模型背景色，一般用在需要强调区别的面板
 * 颜色较浅，大部分色彩都能有较好展示效果
 */
$fill-colors: (
        primary: $sea-color-primary-light-9, // 强调
        success: $sea-color-success-light-9, // 成功
        warning: $sea-color-warning-light-9, // 警告
        danger: $sea-color-danger-light-9, // 危险
        info: $sea-color-gray-light-9, // 信息
);

/**
 * 经典色彩
 * -------------------------------
 * 通过名称直接指定的色彩
 */
$colors: (
        "white": $sea-color-white, // 白色
        "black": $sea-color-black, // 黑色
        "light-gray": $sea-color-light-gray, // 灰色（浅）
        "gray": $sea-color-gray, // 灰色
        "dark-gray": $sea-color-dark-gray, // 灰色（深）
        "red": $sea-color-red, // 红色
        "dark-red": $sea-color-red-dark, // 红色（深）
        "orange": $sea-color-orange, // 橙色
        "dark-orange": $sea-color-orange-dark, // 橙色（深）
        "yellow": $sea-color-yellow, // 黄色
        "dark-yellow": $sea-color-yellow-dark, // 黄色（深）
        "green": $sea-color-green, // 绿色
        "dark-green": $sea-color-green-dark, // 绿色（深）
        "aqua": $sea-color-aqua, // 水绿色（青色）
        "dark-aqua": $sea-color-aqua-dark, // 水绿色（深）
        "light-blue": $sea-color-blue-light, // 蓝色（浅）
        "blue": $sea-color-blue, // 蓝色
        "dark-blue": $sea-color-blue-dark, // 蓝色（深）
        "purple": $sea-color-purple, // 紫色
        "dark-purple": $sea-color-purple-dark, // 紫色（深）
        "navy": $sea-color-navy, // 藏青色
        "dark-navy": $sea-color-navy-dark, // 藏青色（深）
        "fuchsia": $sea-color-fuchsia, // 品红色（紫红色）
        "dark-fuchsia": $sea-color-fuchsia-dark, // 品红色（深，紫红色）
        "maroon": $sea-color-maroon, // 褐红色（栗色）
        "dark-maroon": $sea-color-maroon-dark, // 褐红色（深，栗色）
        "teal": $sea-color-teal, // 蓝绿色
        "dark-teal": $sea-color-teal-dark, // 蓝绿色（深）
        "olive": $sea-color-olive, // 橄榄色
        "dark-olive": $sea-color-olive-dark, // 橄榄色（深）
        "lime": $sea-color-lime, // 酸橙色
        "dark-lime": $sea-color-lime-dark, // 酸橙色（深，亮绿色）
);

/**
 * 字体/背景
 * --------------
 * 使用色彩名称指定的颜色
 */
@each $color-name, $color-value in $colors {
    // 这一套背景色，颜色偏深，字体颜色固定留白
    .bg-#{$color-name} {
        color: $sea-color-white !important;
        background-color: $color-value !important;
    }

    // 字体色
    .text-#{$color-name} {
        color: $color-value !important;
    }
}

// 白色需要改前景色
.bg-white {
    color: $sea-text-color-regular !important;
}

/** 几个常用的经典色彩 */
@each $color-name, $color-value in $standard-colors {
    .bg-#{$color-name} {
        color: $sea-color-white !important;
        background-color: $color-value !important;
    }

    // 字体色
    .text-#{$color-name} {
        color: $color-value !important;
    }
}

// 透明度降到 65%
[class^="bg-"].disabled {
    color: $sea-color-black !important;
    opacity: 0.65;
    filter: alpha(opacity=65);
}

/**
 * 填充色
 * --------------
 * 常用主色调以及辅助色，对应的填充色
 */
@each $color-name, $color-value in $fill-colors {

    .fill-#{$color-name} {
        background-color: $color-value !important;
    }
}

/**
 * 填充色
 * --------------
 * 各类操作面板的背景色，非常重要的设计，后期如果需要整体替换风格，这些样式不能用错
 */
.fill-lighter {
    background-color: $sea-fill-color-lighter !important;
}

.fill-light {
    background-color: $sea-fill-color-light !important;
}

.fill-default {
    background-color: $sea-fill-color !important;
}

.fill-dark {
    background-color: $sea-fill-color-dark !important;
}

.fill-darker {
    background-color: $sea-fill-color-darker !important;
}

/**
 * 前景色
 * --------------
 * 字体颜色设计，非常重要的设计，后期如果需要整体替换风格，这些样式不能用错
 * 注意 .text-primary 是蓝色的
 */
/** 用于强调的深色，使用频次较低 */
.text-fatal {
    color: $sea-text-color-primary !important;
}

/** 通常色彩，页面主要用到的文字颜色  */
.text-regular {
    color: $sea-text-color-regular !important;
}

/** 次选色彩  */
.text-secondary {
    color: $sea-text-color-secondary !important;
}

.text-placeholder {
    color: $sea-text-color-placeholder !important;
}

.text-disabled {
    color: $sea-text-color-disabled !important;
}

/**
 * 重新构造整体的样式
 * ----------------------
 * 重设所有文字的大小、边框属性
 */
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    color: $sea-text-color-regular;
    font-size: $sea-font-size-base;
    font-family: $sea-font-family;
}

/* H1 - H6 font */
h1, .h1,
h2, .h2,
h3, .h3 {
    margin-top: $sea-line-height-margin-top;
    margin-bottom: $sea-line-height-margin-top;

    small, .small {
        font-size: 65%;
    }
}

h4, .h4,
h5, .h5,
h6, .h6 {
    margin-top: $sea-line-height-margin-computed;
    margin-bottom: $sea-line-height-margin-computed;

    small, .small {
        font-size: 75%;
        font-weight: 500;
    }
}

h1, .h1 {
    font-size: $sea-font-size-h1;
}

h2, .h2 {
    font-size: $sea-font-size-h2;
}

h3, .h3 {
    font-size: $sea-font-size-h3;
}

h4, .h4 {
    font-size: $sea-font-size-h4;
}

h5, .h5 {
    font-size: $sea-font-size-h5;
}

h6, .h6 {
    font-size: $sea-font-size-h6;
}

.text-small {
    font-size: small;
}

.text-large {
    font-size: large;
}

.text-strong {
    font-weight: bold;
}

/**
 * General Links
 * ----------------------
 * 超链接，去除了底部的横线，聚焦的时候重新展示
 */
a, .link {
    color: $sea-color-primary;
    cursor: pointer;
    text-decoration: none;
    font-size: $sea-font-size-base;

    &:hover,
    &:active,
    &:focus {
        color: $sea-color-primary;
        text-decoration: underline;
        // 注意：text-decoration-color 可能不是所有浏览器都支持
        text-decoration-color: $sea-color-primary-light-3;
    }
}


/**
 * definition、order-list
 *
 * definition-description and definition-item
 * ----------------------
 * 定义描述，这可能会影响到 element-ui 的描述组件
 */
dt {
    font-weight: 700;
}

dd {
    margin-left: 0;
}

.dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-horizontal dd {
    margin-left: 180px;
}

// ul/ol 去除样式
.disabled-list-style {
    padding: 0;
    list-style: none;
}


/**
 * 徽章形标签，
 * ----------------------
 * 样式类似于微信的未读消息
 */
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 10px;
}

/**
 * 按钮色彩设计
 * ------------------------------------------------------------
 * 追加角标，大部分的盒模型组件，都能追加徽章角标
 */
.with-badge {
    position: relative;

    > .badge {
        position: absolute;
        top: -5px;
        right: -6px;
        font-size: 10px;
        font-weight: 400;
    }
}

/**
 * 文本引用
 * --------------
 * 当前样式不设置背景色，通过制定 bg 属性进行设置
 */
$sea-blockquote-border-width: 5px;
$sea-blockquote-padding: 10px 20px;
$sea-blockquote-margin: 10px 0;
$sea-blockquote-background: $sea-fill-color;
$sea-blockquote-border-left: $sea-blockquote-border-width $sea-border-style $sea-border-color;

blockquote {
    font-size: $sea-font-size-base;
    padding: $sea-blockquote-padding;
    margin: $sea-blockquote-margin;
    border-left: $sea-blockquote-border-left;
    background-color: $sea-blockquote-background;

    // 使用&选择器来嵌套反向blockquote的样式
    &.blockquote-reverse,
    &.pull-right {
        text-align: right;
        border-left: 0;
        border-right: $sea-blockquote-border-left;
    }

    @each $color-name, $color-value in $standard-colors {
        &.blockquote-#{$color-name} {
            border-left-color: $color-value;

            // 如果需要为.blockquote-reverse和.pull-right也设置相应的边框颜色
            &.blockquote-reverse,
            &.pull-right {
                border-right-color: $color-value;
            }
        }
    }
}

/**
 * 盒模型微调样式
 * ----------------------
 */
.margin {
    margin: $sea-margin;
}

.margin-large {
    margin: $sea-margin-large;
}

.margin-small {
    margin: $sea-margin-small;
}

.no-margin {
    margin: 0 !important;
}

.margin-top {
    margin-top: $sea-margin-vertical;
}

.margin-bottom {
    margin-bottom: $sea-margin-vertical;
}

.margin-left {
    margin-left: $sea-margin-horizontal;
}

.margin-right {
    margin-right: $sea-margin-horizontal;
}

.padding {
    padding: $sea-padding;
}

.padding-large {
    padding: $sea-padding-large;
}

.padding-small {
    padding: $sea-padding-small;
}

.padding-top {
    padding-top: $sea-padding-vertical;
}

.padding-bottom {
    padding-bottom: $sea-padding-vertical;
}

.padding-left {
    padding-left: $sea-padding-horizontal;
}

.padding-right {
    padding-right: $sea-padding-horizontal;
}

.no-padding {
    padding: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.border {
    border: $sea-border;
}

.border-top {
    border-top: $sea-border;
}

.border-bottom {
    border-bottom: $sea-border;
}

.border-left {
    border-left: $sea-border;
}

.border-right {
    border-right: $sea-border;
}

.border-radius {
    border-radius: $sea-border-radius-base;
}

.no-border {
    border: 0 !important;
}

.with-shadow {
    box-shadow: $sea-box-shadow;
}

.hover-bg:hover {
    background: $sea-border-color-extra-light;
}

.hover-shadow:hover {
    //border: 1px solid #d2d6de;
    box-shadow: $sea-box-shadow;
}

.no-shadow {
    box-shadow: none !important;
}

/* 圆形的 img 和 div */
.img-circle {
    border-radius: 50% !important;
}

.box-circle {
    border-radius: 50% !important;
}

/**
 * 分割线
 * -------------------------
 */
$sea-divider-width: 1px;
$sea-divider-color: $sea-border-color;

.divider-vertical {
    width: 1px;
    height: 1em;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    border-left: $sea-border;
}

.divider-horizontal {
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: $sea-border;
}

/**
 * Floats
 * -------------------------
 */
.clearfix {
    clear: both;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

/**
 * Toggling content
 * -------------------------
 * 内容转换
 */
.code, code, pre {
    font-size: 14px;
    font-family: $sea-font-family-code;

    p, span, strong {
        font-size: 14px;
        font-family: $sea-font-family-code;
    }
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.text-hide {
    display: none !important;
}

.flex {
    display: flex;
}

.block {
    display: block !important;
}

.smart-block {
    width: 100%;
    box-sizing: border-box;
}

.inline {
    display: inline !important;
}

.inline-block {
    display: inline-block !important;
}

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

/**
 * For single-line text
 * -------------------------
 * 单行文本截断，使用的时候，需要设置宽度，下面效果分别是：截断、渐变、省略
 */
.text-overflow-clip {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

.text-overflow-fade {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: fade;
}

.text-overflow-ellipsis {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
 * Component: Text Box
 * --------------
 * 文本以盒模型展示，鼠标悬浮的时候，背景色置灰；
 *
 * .active/.hover 在大部分场景中，都能有较好表现
 * 如果背景色接近 #E1E1E1，则交互效果会减弱
 */
.text-block {
    display: block;
    cursor: pointer;
    padding: $sea-padding;
    box-sizing: border-box;

    &.active {
        background-color: rgba(225, 225, 225, 0.2);
    }

    &:hover {
        background-color: rgba(225, 225, 225, 0.36);
    }
}

/**
 * scroll-bar
 * -------------------------
 * 注意：
 * 垂直滚动条保持 10px 的空间占位，是为了避免显示 / 隐藏状态切换时，面板发生抖动
 * 水平滚动条一般受影响较小，一般保持默认即可
 */
$sea-scroll-width: 10px;

.scroll {
    overflow-y: scroll; // 始终显示滚动条


    &::-webkit-scrollbar {
        width: $sea-scroll-width;
    }

    /*正常情况下滑块的样式*/
    &::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: $sea-color-gray-light-7;
        border-radius: $sea-scroll-width;
    }

    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
    &:hover::-webkit-scrollbar-thumb {
        background-color: $sea-color-light-gray;
        border-radius: $sea-scroll-width;
    }

    /*鼠标悬浮在滑块上时滑块的样式*/
    &::-webkit-scrollbar-thumb:hover {
        background-color: $sea-color-dark-gray;
    }

    /*正常时候的主干部分：当前会直接融入背景色*/
    &::-webkit-scrollbar-track {
        cursor: pointer;
        //border-radius: 10px;
        background-color: rgba(0, 0, 0, .01);
    }

    /*鼠标悬浮在滚动条上的主干部分*/
    &::-webkit-scrollbar-track:hover {
        -webkit-box-shadow: $sea-box-shadow;
        background-color: $sea-color-gray-light-5;
    }
}

/**
 * scroll-bar
 * -------------------------
 * 更小的滚动条，不怎么方便点击，意义在于提供视觉效果；
 * 类似于菜单，不怎么需要点击事件，但是需要知道当前的滚动位置
 */
$sea-scroll-width-mini: 4px;
.scroll-mini {
    overflow-y: scroll; // 始终显示滚动条

    &::-webkit-scrollbar {
        width: $sea-scroll-width-mini;
    }

    /*正常情况下滑块的样式*/
    &::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: $sea-color-gray-light-8;
        border-radius: $sea-scroll-width-mini;
    }

    /*鼠标悬浮在该类指向的控件上时滑块的样式*/
    &:hover::-webkit-scrollbar-thumb {
        background-color: $sea-color-gray-light-7;
        border-radius: $sea-scroll-width-mini;
    }

    /*鼠标悬浮在滑块上时滑块的样式*/
    &::-webkit-scrollbar-thumb:hover {
        background-color: $sea-color-gray-light-5;
    }

    /*正常时候的主干部分：当前会直接融入背景色*/
    &::-webkit-scrollbar-track {
        cursor: pointer;
    }

    /*鼠标悬浮在滚动条上的主干部分*/
    &::-webkit-scrollbar-track:hover {
        -webkit-box-shadow: $sea-box-shadow;
    }
}

/* 隐藏滚动条 适用于 WebKit 浏览器（Chrome、Safari 等） */
.hidden-scroll::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

/* 标准方法（部分浏览器支持） */
.hidden-scroll {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/**
 * button
 * -------------------------
 * 按钮核心设计，已经定制好大小，与标题栏、输入框等组件形成配套，
 * 再叠加背景色、前景色，即可完成最终设计。
 * 注意：按钮没有统一类名，但是也不准备设计。
 */
$sea-btn-padding-small: 0 11px;
$sea-btn-padding: 0 15px;
$sea-btn-padding-large: 0 19px;

$sea-btn-height-small: 24px;
$sea-btn-height: 32px;
$sea-btn-height-large: 40px;

@mixin btn-base() {
    vertical-align: middle;
    box-sizing: border-box;
    font-size: $sea-font-size-base;
}

/** 并排展示的按钮，增加间隙 */
.button {
    & + .button {
        margin-left: $sea-gap-width;
    }
}

.btn-default {
    @include btn-base;

    height: $sea-btn-height;
    padding: $sea-btn-padding;
    border-radius: $sea-border-radius-base;
}

.btn-large {
    @include btn-base;

    height: $sea-btn-height-large;
    padding: $sea-btn-padding-large;
    border-radius: $sea-border-radius-base;
}

.btn-small {
    @include btn-base;

    height: $sea-btn-height-small;
    padding: $sea-btn-padding-small;
    border-radius: 3px;

    font-size: $sea-font-size-extra-small;
}

.btn-round-default {
    @include btn-base;

    height: $sea-btn-height;
    padding: $sea-btn-padding;
    border-radius: calc($sea-btn-height / 2);
}

.btn-round-large {
    @include btn-base;

    height: $sea-btn-height-large;
    padding: $sea-btn-padding-large;
    border-radius: calc($sea-btn-height-large / 2);
}

.btn-round-small {
    @include btn-base;

    height: $sea-btn-height-small;
    padding: $sea-btn-padding-small;
    border-radius: calc($sea-btn-height-small / 2);

    font-size: $sea-font-size-extra-small;
}

.btn-circle-default {
    @include btn-base;
    border-radius: 50%;

    width: $sea-btn-height;
    height: $sea-btn-height;
}

.btn-circle-small {
    @include btn-base;
    border-radius: 50%;

    width: $sea-btn-height-small;
    height: $sea-btn-height-small;

    font-size: $sea-font-size-extra-small;
}

.btn-circle-large {
    @include btn-base;
    border-radius: 50%;

    width: $sea-btn-height-large;
    height: $sea-btn-height-large;
}

/**
 * 超链接样式的按钮
 * -------------------------
 * 日常编码，推荐使用当前样式，不要使用 a 标签代替按钮，
 * 尤其是 icon，因为点击热区过小，用户体验不是很好。
 */
.btn-link {
    border: 0;
    outline: 0;
    cursor: pointer;
    color: inherit;
    background-color: inherit;

    &:hover {
        color: $sea-color-primary;
        transform-origin: center;
        background-color: rgb(180, 180, 180, 0.12);
    }
}

// 扁平化，去除了圆角、阴影等特效
.btn-flat {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

// 块状显示
.btn-block {
    display: block;
    width: 100%;
}

/** 制作按钮样式的时候，就是这样，几何形状 + 色彩配置 **/
/** 常用的超链接样式的按钮 */
.sea-btn-link {
    @extend .btn-default;
    @extend .btn-link;
}

/** 常用的图标按钮 32x32 圆 */
.sea-btn-icon {
    @extend .btn-link;
    @extend .btn-circle-default;
}

/** 常用的徽形按钮 16px  */
.sea-btn-badge {
    @extend .btn-link;
    @extend .btn-round-default;
}

/**
 * textarea
 * -------------------------
 * 文本域没什么变种，一般就固定这个样式了
 * 文本域与输入框设计，虽然样式一样，但是没什么联系
 */
.textarea {
    border: 0;
    outline: 0;
    width: 100%;
    box-sizing: border-box;
    color: $sea-text-color-regular;
    border-radius: $sea-border-radius-base;
    box-shadow: 0 0 0 1px $sea-border-color inset;

    padding: $sea-padding;
    font-size: $sea-font-size-base;

    &:hover {
        box-shadow: 0 0 0 1px $sea-border-color-darker inset;
    }

    &:focus {
        box-shadow: 0 0 0 1.4px $sea-color-primary inset;
    }
}

/**
 * for input
 * -------------------------
 * 当前主要包含输入框的大小设计，
 * 对于 hover、边框等属性的设置，需要扩展
 */
$sea-input-height-small: 24px;
$sea-input-height: 32px;
$sea-input-height-large: 40px;

.input {
}

input.no-border {
    border: 0 !important;
    outline: 0 !important;
}

.input-default {
    box-sizing: border-box;
    height: $sea-input-height;
}

.input-large {
    box-sizing: border-box;
    height: $sea-input-height-large;
}

.input-small {
    box-sizing: border-box;
    height: $sea-input-height-small;
}

/*在 firefox下移除 input[number] 的上下箭头*/
.input-number {
    -moz-appearance: textfield;

    /**取消自旋按钮（上下箭头）*/
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }
}

$sea-input-border-radius: $sea-border-radius-base;
$sea-input-fix-padding: 0 20px;

/**
 * 输入框租
 * -----------------------------------
 * 输入框附带前后按钮、icon
 */
.input-group {
    padding: 0;
    display: flex;
    align-items: stretch;

    & > :first-child {
        border-bottom-left-radius: $sea-input-border-radius;
        border-top-left-radius: $sea-input-border-radius;
    }

    & > :last-child {
        border-bottom-right-radius: $sea-input-border-radius;
        border-top-right-radius: $sea-input-border-radius;
    }

    > .input-prefix {
        position: relative;

        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        min-height: 100%;

        padding: $sea-input-fix-padding;
    }

    > .input-suffix {
        position: relative;

        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        min-height: 100%;

        padding: $sea-input-fix-padding;
    }

    > .input-wrapper {
        display: inline-flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;

        padding: 1px 11px;

        > input {
            flex-grow: 1;
            border: 0 !important;
            outline: 0 !important;
        }

        > .input-prefix-inner {
            margin-right: 8px;
        }

        > .input-suffix-inner {
            margin-left: 8px;
        }
    }
}

/**
 * for width
 * --------------
 * 常用的宽度设置
 */
.width-100 {
    width: 100% !important;
}

.width-80 {
    width: 80% !important;
}

.width-75 {
    width: 75% !important;
}

.width-60 {
    width: 60% !important;
}

.width-50 {
    width: 50% !important;
}

.width-40 {
    width: 40% !important;
}

.width-25 {
    width: 25% !important;
}

.width-20 {
    width: 20% !important;
}

/**
 * The gaps setting in grid and flex layouts
 * --------------
 * 间隙设计，grid / flex 布局都可以使用
 */
.with-gap, .gap-default {
    row-gap: $sea-gap-width !important;
    column-gap: $sea-gap-height !important;
}

/**
 * Component: grid
 * --------------
 * 常用的网格布局，只做列的拆分，水平方向上的高度自适应
 */
.grid-col-1 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
}

.grid-col-2 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
}

.grid-col-3 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
}

.grid-col-4 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
}

.grid-col-5 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(5, 1fr);
}

.grid-col-6 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(6, 1fr);
}

.grid-col-7 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(7, 1fr);
}

.grid-col-8 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(8, 1fr);
}

/**
 * For Affix plugin
 * -------------------------
 */
.affix {
    position: fixed;
}

/**
 * For position & absolute
 * -----------------------------------------------
 * 定位元素
 */
.relative-panel, .anchor {
    position: relative;
}

.absolute {
    position: absolute;
}

/**
 * Component: flex-column 垂直弹性布局
 * --------------
 * 上中下布局，用于制作各类信息面板
 */
.flex-column, .flex-column-gap {
    display: flex;
    flex-direction: column;

    > .flex-header {
        flex-shrink: 0;
    }

    > .flex-body {
        flex: 1;
        overflow: auto;
    }

    > .flex-footer {
        flex-shrink: 0;
    }
}

/**
 * Component: flex-row 水平弹性布局
 * --------------
 * 左中右布局，用于制作产品列表（类似于淘宝购物车）
 */
.flex-row, .flex-row-gap {
    display: flex;
    flex-direction: row;

    > .flex-left {
        flex-shrink: 0;
    }

    > .flex-body {
        flex: 1;
        overflow: auto;
    }

    > .flex-right {
        flex-shrink: 0;
        text-align: right;
    }

    & > .align-right {
        margin-left: auto;
        display: inherit;
        gap: inherit;
    }
}

// row with gap
.flex-column-gap {
    row-gap: $sea-gap-width;
}

// column with gap
.flex-row-gap {
    column-gap: $sea-gap-height;
}

// 通过 flex 布局，给每个元素增加间隙，元素沿着基线对齐
.flex-spaced-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: $sea-gap-width;
    column-gap: $sea-gap-height;
}

/**
 * 拟态窗口
 * ------------------------------------
 * 默认情况下，窗口大小是根据内容自适应的，也可以通过样式，调整为常用大小
 */
dialog {
    border: 0;
    padding: 0;
    border-radius: 6px;

    box-shadow: $sea-box-shadow;
    animation: fadeIn 0.3s ease-out;

    ::backdrop {
        background-color: rgba(0, 0, 0, 0.3);
        animation: backdropFadeIn 0.3s ease-out;
    }

    &.fullscreen {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes backdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}